<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div @click="fn2">
            <!-- 修饰符 -->
            <!-- 1.事件修饰符 -->
            <!-- prevent 阻止默认行为 -->
            <!-- .stop组织事件冒泡 -->
            <!-- 2.按键修饰符 -->
            <!-- 3.v-model修饰符 -->


            <input type="text" v-model="name" @click.stop @keyup.enter="add">
            <a href="https：//www.baidu.com" @click.prevent.stop="fn">添加</a>
        </div>
        <ul>
            <li v-for="item in list">
                <button>{{item.name}}删除</button>
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in list">
                <button @click="list.splice(index,1)">{{item.name}}删除</button>
            </li>
        </ul>


    </div>



    <script src=" vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                list: [
                    { id: 1, name: "小明" },
                    { id: 2, name: "小红" },
                    { id: 3, name: "小刚" },

                ]

            },
            methods: {
                fn(e) {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })

                },
                fn2() {
                    alert('冒泡了')
                },
                add() {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })
                    console.log('键盘被巴拉了  ----->  ', '键盘被巴拉了');

                }

            }


        });
    </script>
</body>

</html>